
<template>
  <div>
    <div class="pay-main">
      <div class="main">
        <div class="w">
          <div class="grayBox">
            <div class="title">
              <h2>支付订单</h2>
            </div>
            <div>
              <div class="container orderInfo">
                <h3>提交订单成功，请填写捐赠信息</h3>
                <p class="paymentDetail">
                  请在 24 小时内完成支付，超时订单将自动取消
                </p>
                <p class="paymentDetail">
                  我们不会在您完成支付后的 72 小时内发货，您的支付将用作捐赠
                </p>
                <p class="paymentDetail" style="color: red">
                  支付成功后文档或源码将自动发至您填写的邮箱中（推荐QQ邮箱）
                </p>
              </div>
              <div class="payInfo">
                <span style="color: red">*</span>昵称:
                <div class="input">
                  <input
                    v-model="Name"
                    placeholder="请输入你的昵称"
                    type="tetx"
                    class="inPay"
                  />
                </div>
                <br />
                <span style="color: red">*</span>金额:
                <div class="input">
                  <select class="inPay" v-model="money" >
                    <option value="1">
                      ￥1.00 支付测试（XMall分布式详细文档）
                    </option>
                    <option value="2">
                      ￥58.00 感谢捐赠（XMall单体版源码及文档）
                    </option>
                  </select>
                </div>
                <br />
                <span style="color: red">*</span>邮箱:
                <div class="input">
                  <input
                    v-model="email"
                    class="inPay"
                    placeholder="支付结果及文档源码将发送至您的邮箱(推荐QQ邮箱)"
                    type="tetx"
                  />
                </div>
                <br />
                &nbsp;&nbsp;留言:
                <div class="input">
                  <input
                    placeholder="请输入您的留言内容"
                    type="text"
                    class="inPay"
                    v-model="text"
                  />
                </div>
                <br />
                <div class="payType">
                  <div class="payTitle">支付方式</div>
                  <hr />
                  <div class="payItem">
                    <div class="active"><img src="./images/zfb.png" /></div>
                    <div><img src="./images/wx.png" /></div>
                    <div><img src="./images/qqpay.png" /></div>
                  </div>
                </div>
                <div class="boxInner">
                  <div>
                    <span>订单金额</span>
                    <em>
                      <span>￥</span>
                      {{orderId.totalPrice}}
                    </em>
                    <span>实际支付金额</span>
                    <em>
                      <span>￥</span>
                       {{orderId.totalPrice}}
                    </em>
                    <input
                      type="button"
                      value="立刻支付"
                      class="payBtn"
                      readonly
                      @click="toPaySuccess"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="payMsg">
            <div class="confirmDeatil">
              <div class="infoTitle">收货信息</div>
              <p class="infoDetail">姓名：{{ addressInfo.userName }}</p>
              <p class="infoDetail">联系电话：{{ addressInfo.tel }}</p>
              <p class="infoDetail">详细地址：{{ addressInfo.streetName }}</p>
            </div>
          </div>
          <div class="confirm-table-title">
            <span class="name">商品信息</span>
            <div>
              <span class="price">价格</span>
              <span class="num">数量</span>
              <span class="subtotal">小计</span>
            </div>
          </div>
          <div class="confirm-goods">
            <div
              class="itemCarts"
              v-for="(goods, index) in goodsList"
              :key="index"
            >
              <div class="name">
                <div class="name-cell">
                  <a href="" target="_blank" rel="noopener noreferrer">{{
                    orderId.name
                  }}</a>
                </div>
              </div>
              <div class="numPrice">
                <div class="goodsPrice">￥ {{ orderId.price}}</div>
                <div class="goodsNum">{{ orderId.Num }}</div>
                <div class="goodsTotal">
                  <div class="goodsSubTotal">
                    ￥{{ orderId.totalPrice }}
                    <br />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="orderDiscount">
            <p style="font-size: 14px; font-weight: bolder">
              <span style="padding-right: 47px">商品总计:</span>
              <span style="font-size: 16px; font-weight: 500; line-height: 32px"
                >￥ {{orderId.totalPrice}}</span
              >
            </p>
            <p>
              <span style="padding-right: 30px">运费：</span>
              <span style="font-weight: 700">+ ￥ 0.00</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--
 * @Author: your name
 * @Date: 2021-04-16 21:21:27
 * @LastEditTime: 2021-04-17 09:06:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xmall_vue\src\pages\Pay\index.vue
-->
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "Payinfo",
  data() {
    return {
      orderId: {},
      Name: "",
      money: "",
      email: "",
      text: "",
    };
  },
  beforeMount() {
    this.orderId = this.$route.query;
  },
  mounted() {
    // console.log(this.$route.query)
    this.getPayInfo();
  },
  methods: {
    getPayInfo() {
      this.$store.dispatch("getPayInfoList", this.orderId);
    },
    toPaySuccess() {
      let regEmail = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
      const { Name, money, email } = this;
      if ( money&& Name) {
        if (regEmail.test(email)) {
          this.$router.push({
            path: "/payLoad",
            query:this.orderId
          });
        }
      }else{
          alert('请务必填写加*的框')
      }
    },
  },
  computed: {
    ...mapState({
      payInfo: (state) => state.payInfo.payInfo,
    }),
    ...mapGetters(["addressInfo", "goodsList"]),
  },
};
</script>

<style lang="less" scoped>
.pay-main .main {
  background-color: #ededed;
}
.pay-main .main .w {
  width: 1220px;
  margin: 0 auto;
  padding-top: 39px;
}
.grayBox {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
}
.grayBox .title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #333;
  background: linear-gradient(#fbfbfb, #ececec);
  padding-left: 30px;
  position: relative;
  z-index: 10;
  height: 60px;
  padding: 0 10px 0 24px;
  border-bottom: 1px solid #d4d4d4;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grayBox .title h2 {
  font-size: 18px;
  font-weight: 400;
  color: #626262;
  display: inline-block;
}
.grayBox .container {
  line-height: 60px;
  height: 230px;
  border-top: 1px solid #e5e5e5;
  box-sizing: border-box;
}
.grayBox .orderInfo {
  padding: 60px 0 55px;
  color: #333;
  background: #fff !important;
}
.grayBox .orderInfo h3 {
  padding-bottom: 14px;
  line-height: 36px;
  text-align: center;
  font-size: 36px;
}
.orderInfo p {
  display: block;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  color: #999;
}
.payInfo {
  margin-top: -2vw;
  text-align: center;
}

.payInfo .input {
  margin: 0 0 1vw 38px;
  display: inline-block;
}
.payInfo .input .inPay {
  display: block;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #bfcbd9;
  box-sizing: border-box;
  color: #1f2d3d;
  font-size: 14px;
  width: 370px;
  height: 36px;
  line-height: 1;
  outline: 0;
}
.payType {
  margin: 0 auto;
  width: 90%;
  padding-bottom: 30px;
}
.payType .payTitle {
  text-align: left;
  font-size: 18px;
  line-height: 40px;
  padding: 0 10px;
  position: relative;
  color: #626262;
}
.payItem {
  display: flex;
  align-items: center;
}
.payItem div {
  margin-top: 20px;
  width: 175px;
  height: 50px;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  border-radius: 6px;
  margin-right: 10px;
  background: #fafafa;
}
.payItem .active {
  border-color: #6a8fe5;
  background: #fff;
}
.payItem div > img {
  height: 34px;
  margin: 8px auto;
}
.boxInner {
  line-height: 60px;
  background: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  box-sizing: border-box;
}
.boxInner > div {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px;
}
.boxInner em {
  margin-left: 5px;
  font-size: 24px;
  color: #d44d44;
  font-weight: 700;
  margin-right: 20px;
}
.boxInner .payBtn {
  width: 120px;
  height: 40px;
  font-size: 16px;
  line-height: 38px;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #afafaf;
  border-radius: 4px;
  color: #fff;
   background-color: skyblue;
 
}
.payMsg {
  padding-top: 39px;
  width: 1220px;
  margin: 0 auto;
}
.payMsg .confirmDeatil {
  padding: 0 30px 25px;
  border-top: 1px solid #d5d5d5;
}
.payMsg .confirmDeatil .infoTitle {
  height: 14px;
  margin: 30px 0 17px;
  line-height: 14px;
  font-weight: bolder;
  color: #333;
}
.payMsg .confirmDeatil .infoDetail {
  line-height: 24px;
  color: #666;
}
.confirm-table-title {
  padding: 3px 0 0 33px;
  border-top: 1px solid #d5d5d5;
  line-height: 54px;
  font-weight: bolder;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.confirm-table-title span {
  display: inline-block;
  width: 175px;
  text-align: left;
}
.confirm-table-title .price {
  padding-left: 80px;
}
.confirm-table-title .num {
  padding-left: 75px;
}
.confirm-table-title .subtotal {
  padding-left: 72px;
}
.confirm-goods {
  border-top: 1px solid #d5d5d5;
}
.confirm-goods .itemCarts {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.confirm-goods .itemCarts .name {
  width: 40%;
}
.confirm-goods .itemCarts .name .name-cell {
  padding-left: 33px;
}
.confirm-goods .itemCarts .name .name-cell > a {
  color: #333;
  font-style: normal;
  text-decoration: none;
  cursor: pointer;
}
.numPrice {
  display: flex;
  align-items: center;
  justify-content: center;
}

.numPrice > div {
  color: #626262;
  font-weight: 700;
  width: 270px;
  text-align: center;
}
.orderDiscount {
  padding: 22px 30px 53px;
  border-top: 1px solid #d5d5d5;
  line-height: 24px;
  text-align: right;
  font-size: 12px;
}
</style>
